<template>
  <div>
    <Header/>
    <footer id="fabNav" class="affix dock-bottom dock-left fab has-padding dock-auto shadow-none">
      <a id="tocBtn" class="btn circle primary layer btn-lg"><i class="icon icon-list-ul"></i></a>
    </footer>
    <div class="top-home">
      <div id="demo" class="carousel slide" data-bs-ride="carousel">
        <!-- 指示符 -->
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
          <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
          <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
        </div>
        <!-- 轮播图片 -->
        <div class="carousel-inner mt-4">
          <div class="carousel-item active">
            <img src="http://127.0.0.1:8181/static/index1.png"
              class="d-block img-thumbnail" style="width:100%">
          </div>
          <div class="carousel-item">
            <img src="http://image.read.duokan.com/mfsv2/download/fdsc3/p01btQhhzKEP/uXSEtKJUVA4reR.jpg!q90"
              class="d-block img-thumbnail" style="width:100%">
          </div>
          <div class="carousel-item">
            <img src="http://image.read.duokan.com/mfsv2/download/fdsc3/p01HcvpQ4cI9/WgZADYUd9j6wwI.jpg!q90"
              class="d-block img-thumbnail" style="width:100%">
          </div>
        </div>
        <!-- 画布 -->
        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop"
          aria-labelledby="offcanvasWithBackdropLabel">
          <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">使用背景画布</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>
          <div class="offcanvas-body">
            <p>正文内容不可滚动</p>
          </div>
        </div>
        <!-- 左右切换按钮 -->
        <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>
      <section class="container">
        <ul class="top-home-tag">
          <li class="top-home-btn">
            <a href="/male">
              <img src="/static/img/male.png" alt="男生" class="img-tag img-thumbnail">
              <!-- <p class="top-font">男生</p> -->
            </a>
          </li>
          <li class="top-home-btn">
            <a href="/female">
              <img src="/static/img/female.png" alt="女生" class="img-tag img-thumbnail">
              <!-- <p class="top-font">女生</p> -->
            </a>
          </li>
          <li class="top-home-btn">
            <a href="/category">
              <img src="/static/img/category.png" alt="分类" class="img-tag img-thumbnail">
              <!-- <p class="top-font">分类</p> -->
            </a>
          </li>
          <li class="top-home-btn">
            <a href="/rank">
              <img src="/static/img/rank.png" alt="排行" class="img-tag img-thumbnail">
              <!-- <p class="top-font">排行</p> -->
            </a>
          </li>
        </ul>
      </section>
    </div>

    <section class="container">
    <div class="row mt-1">
      <div class="row-header">
          本周最火
      </div>
      <a class="col-sm-4 img-thumbnail box-content" v-for="(item, index) in booklist" :key="index" @click="jumpTo(item)">
        <dt><img :src="item.imgurl?item.imgurl:'/static/img/'+ item.id +'.png'" class="img-box box-content"></dt>
        <dd class="content mt-1">
          <p>{{ item.name.length > 42 ? item.name.substring(0, 42) + "..." : item.name }}</p>
          <p>{{ item.author }}</p>
          <p>{{ item.content.length > 84 ? item.content.substring(0, 84) + "..." : item.content }}</p>
        </dd>
      </a>
    </div>
    </section>
  </div>

</template>

<script>
import Header from './components/Header.vue'

export default {
  components: {
    Header
  },
  data() {
    return {
      flag: false,
      keyword: '',
      pagenum: 0,
      retlist: null,
      booklist: []
    }
  },

  mounted() {
    this.$http.post('api/index', {
      pagenum: this.pagenum,
      pagesize: 10
    }, {emulateJSON: true}).then((response) => {
      this.booklist = response.data.data.list
    })
    // var data = {
    //   pagenum: this.pagenum,
    //   pagesize: 10
    // }
    // var json = JSON.stringify(data)
    // this.$http.post('api/content',
    //   json, {emulateJSON: true}).then((response) => {
    //   this.booklist = response.body.data.list
    // })
  },

  methods: {
    reTheme() {
      this.flag = !this.flag
      if (this.keyword != null && this.keyword !== '') {
        this.$http.get('api/search?keyword=' + this.keyword).then((response) => {
          this.booklist = response.data.data
          this.$refs.keyword.popover(response.data.msg)
        })
      }
    },
    jumpTo(target) {
      this.$router.push({path: '/cover',
        query: {
          name: target.name,
          imgurl: target.imgurl,
          author: target.author,
          content: target.content,
          count: target.count,
          update_time: target.update_time,
          id: target.id
        }})
      // this.$router.push({path:'/cover', query: {target: target}})
    }
  }
}
</script>

<style lang='scss' scoped>
.container {
  .row {
    .col-sm-4 {
      background-color: white;
      border: px2rem(3) solid #ffffff;
      display: flex;
      align-items: center;
      margin-left: px2rem(10);
      // justify-content: space-between;
      .content {
        padding-left: 1rem;
      }
    }
  }
  .row-header {
    background-color: white;
    padding: 0.5rem 1rem 0.5rem 1rem;
    border-bottom: 1px solid gray;
    border-radius: 0.25rem;
    margin-bottom: 1px;
  }
}

.box-content {
  max-height: 8rem;
}

.top-home {
  background-color: white;
  width: 100%;
  // border-radius: 0.5rem;
  border-bottom-right-radius:0.5rem;
  border-bottom-left-radius:0.5rem;
  .top-home-tag {
    display: flex;
    padding-left: 2rem !important;
    align-items: stretch;
    .top-home-btn {
      width: 25%;
      .img-tag {
        width: 42%;
      }
    }
  }
}
</style>
